<script lang="ts" setup>
import { ref } from 'vue'
import { useSafeAreaHooks } from '@/composables/useSafeArea'

const { top } = useSafeAreaHooks()

// 此页面暂无交互逻辑
const list = ref([
  {
    id: 1,
    name: '小红',
    content: '这是消息1的内容',
    time: '2024-09-18 10:00',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/767f73117fcb81036c340b2dd3e1c4b7.jpg',
  },
  {
    id: 2,
    type: 'system',
    name: '系统消息',
    content: '这是消息2的内容',
    time: '2024-09-18 11:00',
  },
  {
    id: 3,
    name: '小蓝',
    content: '这是消息3的内容',
    time: '2024-09-18 12:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t019ec04a9101352aa7.jpg',
  },
  {
    id: 4,
    name: '小黄',
    content: '这是消息4的内容',
    time: '2024-09-18 13:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t01018899e383c22227.jpg',
  },
  {
    id: 5,
    name: '小紫',
    content: '这是消息5的内容',
    time: '2024-09-18 14:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t0171f0034fe2a64f06.jpg',
  },
  {
    id: 6,
    name: '小绿',
    content: '这是消息6的内容',
    time: '2024-09-18 15:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t01ae81c6959c497192.jpg',
  },
  {
    id: 7,
    name: '小橙',
    content: '这是消息7的内容',
    time: '2024-09-18 16:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t012a020b6496d29494.jpg',
  },
  {
    id: 8,
    name: '小粉',
    content: '这是消息8的内容',
    time: '2024-09-18 17:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t017642a2d3d522e4d1.jpg',
  },
  {
    id: 9,
    name: '小红',
    content: '这是消息9的内容',
    time: '2024-09-18 17:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t017642a2d3d522e4d1.jpg',
  },
  {
    id: 10,
    name: '小红',
    content: '这是消息10的内容',
    time: '2024-09-18 17:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t012a020b6496d29494.jpg',
  },
  {
    id: 11,
    name: '小红',
    content: '这是消息11的内容',
    time: '2024-09-18 17:00',
    avatar: 'https://p.ssl.qhimg.com/sdm/480_480_/t01ae81c6959c497192.jpg',
  },
])
</script>

<template>
  <view class="container">
    <view
      class="header"
      :style="{ paddingTop: `${top}px` }"
    >
      <text class="title">
        消息
      </text>
      <view class="find-group">
        <uni-icons
          type="person"
          size="20"
          color="#333333"
        />
        <text class="find-text">
          发现群聊
        </text>
      </view>
    </view>

    <view class="quick-actions">
      <view class="action-item">
        <view class="icon-wrapper like">
          <wd-icon
            name="heart"
            size="22px"
            color="#FF2442"
          />
        </view>
        <text class="action-text">
          赞和收藏
        </text>
      </view>
      <view class="action-item">
        <view class="icon-wrapper follow">
          <text class="i-mdi-account-outline text-[22px] color-#4080FF" />
        </view>
        <text class="action-text">
          新增关注
        </text>
      </view>
      <view class="action-item">
        <view class="icon-wrapper comment">
          <text class="i-mdi-chat-processing-outline text-[20px] color-#07C160" />
        </view>
        <text class="action-text">
          评论和@
        </text>
      </view>
    </view>

    <scroll-view
      class="message-list"
      scroll-y
    >
      <view
        v-for="item in list"
        :key="item.id"
        class="message-item"
      >
        <image
          v-if="item.type !== 'system'"
          class="avatar"
          :src="item.avatar"
        />
        <view
          v-else
          class="system-notice"
        >
          <wd-icon
            name="notification"
            size="28px"
            color="#4080FF"
          />
        </view>
        <view class="content">
          <view class="title-row">
            <text class="name">
              {{ item.name }}
            </text>
            <text class="time">
              {{ item.time }}
            </text>
          </view>
          <text class="preview">
            {{ item.content }}
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
}

.header {
  position: relative;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f2f2f2;
}

.header .title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.find-group {
  position: absolute;
  right: 24rpx;
  display: flex;
  align-items: center;
}

.find-text {
  font-size: 14px;
  color: #333333;
  margin-left: 8rpx;
}

.quick-actions {
  display: flex;
  justify-content: space-around;
  padding: 32rpx 0;
  border-bottom: 1px solid #f2f2f2;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
}

.like {
  background-color: #FFF0F2;
}

.follow {
  background-color: #ECF3FF;
}

.comment {
  background-color: #E8F7ED;
}

.action-text {
  font-size: 12px;
  color: #666666;
}

.message-list {
  flex: 1;
  overflow: auto;
}

.message-item {
  display: flex;
  padding: 24rpx;
  border-bottom: 1px solid #f2f2f2;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 24rpx;
}

.system-notice {
  width: 80rpx;
  height: 80rpx;
  margin-right: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  flex: 1;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.name {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.time {
  font-size: 12px;
  color: #999999;
}

.preview {
  font-size: 14px;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crown-avatar {
  position: relative;
}

.crown-avatar::before {
  content: '';
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 32rpx;
  height: 32rpx;
  background: url('https://ai-public.mastergo.com/ai/img_res/2e88852bd01daf60e90677df608f5714.jpg') no-repeat;
  background-size: contain;
}
</style>
